<template>
  <view class="u-mask" v-show="visible">
    <view class="u-modal">
      <view class="modal-title" v-if="title">
        <text> {{ title }} </text>
      </view>
      <view class="modal-content">
        <rich-text :nodes="content" v-if="content"></rich-text>
        <slot v-if="slots.default" />
      </view>
      <view class="modal-footer" v-if="showFooter">
        <view
          class="cancel"
          @tap="cancel"
          v-if="showCancel"
          :style="{ color: cancelColor }"
        >
          {{ cancelText }}
        </view>
        <slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
        <view
          v-else
          class="confirm"
          @tap="confirm"
          :style="{ color: confirmColor }"
        >
          {{ confirmText }}
        </view>
      </view>
    </view>
    <image
      v-if="showClose"
      src="@/static/images/close-icon.png"
      mode="scaleToFill"
      class="close"
      @tap="cancel"
    />
  </view>
</template>

<script lang="ts" setup>
import { useSlots } from 'vue'

const slots = useSlots()
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: false
  },
  title: {
    type: String
  },
  content: {
    type: String
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  cancelColor: {
    type: String,
    default: '#04B27C'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: '确认'
  },
  confirmColor: {
    type: String,
    default: '#ffffff'
  },
  option: {
    type: Object,
    default: () => ({})
  }
})
const emits = defineEmits(['cancel', 'confirm', 'update:visible'])

function cancel() {
  emits('cancel')
  emits('update:visible', false)
}
function confirm() {
  emits('confirm')
  emits('update:visible', false)
}
</script>

<style lang="scss" scope>
.u-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.u-modal {
  font-size: 32rpx;
  line-height: 1.5;
  padding: 32rpx 48rpx;
  z-index: 9999;
  width: 640rpx;
  background-color: #fff;
  text-align: center;
  border-radius: 32rpx;
  overflow: hidden;
}
.close {
  width: 80rpx;
  height: 80rpx;
  margin-top: 44rpx;
}
.modal-title {
  padding: 0;
  text {
    font-weight: 600;
    font-size: 36rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
  }
}
.modal-content {
  margin-top: 32rpx;
  // min-height: 80rpx;
  text-align: left;
  color: #262626;
  max-height: 800rpx;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-all;
}
.modal-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 64rpx;
  view {
    flex: 1;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    border: 1px solid rgba(4, 178, 124, 0.6);
    padding: 16rpx 0;
    border-radius: 16rpx;
    & + view {
      margin-left: 24rpx;
    }
    &.confirm {
      background: #04b27c;
      font-weight: bold;
    }
  }
}
</style>
